const gulp = require('gulp')
const uglify = require('gulp-uglify')      // 压缩，去空格去注释
const babel = require("gulp-babel");       // JS兼容
const rev = require("gulp-rev");           // 去缓存
const revCollector = require('gulp-rev-collector') //替换保存过的，html中css/js文件路径名
const cssmin = require('gulp-minify-css'); // 压缩，去注释
const imagemin = require('gulp-imagemin'); // 压缩图片
const minifyhtml = require('gulp-minify-html'); // 压缩HTML

//开发服务器配置
const { createProxyMiddleware } = require('http-proxy-middleware')
const server = require('browser-sync').create();
const watch = require('gulp-watch');

gulp.task('serve', () => {
    server.init({
        server: {
            baseDir: './src',
            middleware: [
                // 最终请求地址 = target + $.get/$.post/$.ajax url 
                // https://baidu.com + /api/sugrec?json=1&prod=pc&wd=htm&req=2&bs=html
                // ...
                createProxyMiddleware('/api', {//将真实需要请求的网址改成'/api'
                    //目标服务器网址---target后面书写需要请求的网址
                    target: "http://kg.zhaodashen.cn",
                    changeOrigin: true,//是否允许跨域
                    secure: false,// 关闭SSL证书验证https协议接口需要改
                    pathRewrite: { //重写路径请求
                        // 重写
                        // '^/old/api' : '/new/api'
                        // 移除
                        '^/api': ''
                        // '^/remove/api' : ''
                        // 添加
                        // '^/' : '/basepath/'
                    }
                })
            ]
        },
        port: 80
    })

    // 监控文件修改---相当于热更新
    watch('src/*.html', function () {
        console.log('你修改HTML文件了')
        server.reload()
    })
    watch('src/css/*.css', function () {
        console.log('你修改CSS文件了')
        server.reload()
    })
    watch('src/js/*.js', function () {
        console.log('你修改JS文件了')
        server.reload()
    })
})




//------------------------快捷打包原理--------------------------
//打包js
gulp.task('js', (over) => {
    //注意：压缩的文件同名时自动覆盖
    gulp
        //查找文件
        .src('./src/js/*.js') //等同于.src(['./src/js/a.js',./src/js/b.js])
        //JS兼容--到ES6
        .pipe(babel({ "presets": ["env"] }))
        //压缩文件
        .pipe(uglify())
        //去缓存,文件第一次压缩时会在后面拼接上一段hash值,当压缩的文件内容发生改变时候会生成新压缩文件拼接新的hash值
        .pipe(rev())
        //gulp.dest('写入文件的路径')写数据
        .pipe(gulp.dest('dist/js'))
        // 写入JS之后，将本次的随机名保存起来
        .pipe(rev.manifest())
        .pipe(gulp.dest('temp/js'));
    over()
})

//打包css
gulp.task('css', (over) => {
    gulp
        .src('./src/css/*.css')
        .pipe(cssmin())
        .pipe(rev())
        .pipe(gulp.dest('./dist/css'))
        // 写入JS之后，将本次的随机名保存起来
        .pipe(rev.manifest())
        .pipe(gulp.dest('temp/css'));
    over()
})

//打包img
gulp.task('imgs', (over) => {
    gulp
        .src('src/imgs/*.*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/imgs'))
    setTimeout(() => { //此处设置定时器的作用是为了给前面js和css文件保存文件路径名留出时间，这样就可以在生成html文件时，有替换文件路径名的时间
        over()
    }, 10000)
})

//打包html
gulp.task('html', () => {
    gulp
        // .src('./src/*.html')
        .src(['temp/**/*.json', 'src/*.html'])
        .pipe(revCollector())
        .pipe(minifyhtml())
        .pipe(gulp.dest('dist'))
})

gulp.task('build', gulp.series('js', 'css', 'imgs', 'html'), () => {
    console.log('打包完成');
})